import React from 'react';
import Taro from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components';
import './index.less';
import store from '@/src/store';
import { observer } from 'mobx-react-lite';
import { netWorkErrorInfo } from '../utils/constants';
import { isLoginFun } from '../common/method/commonFun';
import { halfScreenJump } from '../utils/halfScreen';

interface TabItem {
  icon: string;
  selectedIcon: string;
  label: string;
  pagePath: string;
}

// 与 app.config.ts 中 tabBar.list 一致
const tabs: TabItem[] = [
  {
    icon: 'https://file.linkcook.cn/image/wineMiniProgram/tab/home.png',
    selectedIcon:
      'https://file.linkcook.cn/image/wineMiniProgram/tab/home-active.png',
    label: '首页',
    pagePath: '/pages/home/index',
  },
  {
    icon: 'https://file.linkcook.cn/image/wineMiniProgram/tab/book.png',
    selectedIcon:
      'https://file.linkcook.cn/image/wineMiniProgram/tab/book-active.png',
    label: '百科',
    pagePath: '/pages/wiki/index',
  },
  {
    icon: 'https://file.linkcook.cn/image/wineMiniProgram/tab/scan.png',
    selectedIcon: 'https://file.linkcook.cn/image/wineMiniProgram/tab/scan.png',
    label: '',
    pagePath: '/pages/scan/index',
  },
  {
    icon: 'https://file.linkcook.cn/image/wineMiniProgram/tab/manage.png',
    selectedIcon:
      'https://file.linkcook.cn/image/wineMiniProgram/tab/manage.png',
    // selectedIcon:
    //   'https://file.linkcook.cn/image/wineMiniProgram/tab/manage-active.png',
    label: '商城',
    pagePath: '',
  },
  {
    icon: 'https://file.linkcook.cn/image/wineMiniProgram/tab/user.png',
    selectedIcon:
      'https://file.linkcook.cn/image/wineMiniProgram/tab/user-active.png',
    label: '我的',
    pagePath: '/pages/mine/index',
  },
];

const tabPagePaths = tabs.map((t) => t.pagePath);

const CustomTabBar: React.FC = () => {
  // 不渲染就隐藏
  if (!store.commonStore.showTabBar) return null;
  const active = store.commonStore.activeTab;
  const handleChange = (tab: TabItem, idx: number) => {
    //判断网络状态，如果没有网络则不可点击
    if (!store.commonStore.networkStatus) {
      Taro.showToast({ title: netWorkErrorInfo, icon: 'none' });
      return;
    }
    if (idx === active) return;
    if (tabPagePaths.includes(tab.pagePath)) {
      if (idx === active) return;
      //  再触发跳转
      // if (tab.pagePath === '/pages/scan/index') {
      //   if (!isLoginFun()) return;
      //   // Taro.showToast({ title: 'AI识别开发中', icon: 'none' });
      //   // return;
      // } else
      if (tabPagePaths.includes(tab.pagePath) && tab.pagePath !== '') {
        Taro.switchTab({ url: tab.pagePath });
      } else if (tab.pagePath === '') {
        if (store.commonStore.pagePath === '') {
          Taro.showToast({ title: '暂无商城信息，请稍后再试。', icon: 'none' });
          return;
        }
        halfScreenJump(store.commonStore.pagePath, {
          onFail: (err) => {
            //打开失败回调
            Taro.showToast({
              title: '暂无商品信息，请稍后再试',
              icon: 'none',
            });
          },
          onReturn: ({ reason, extraData }) => {
            //关闭半屏回调
            console.log('return reason:', reason, extraData);
          },
        });
        return;
      } else {
        Taro.navigateTo({ url: tab.pagePath });
      }
      //  立即更新状态
      store.commonStore.setActiveTab(idx);
    }
  };

  return (
    <View
      className="custom-tab-bar"
      style={{ paddingBottom: `${store.commonStore.safeAreaBottom}rpx` }}
    >
      {tabs.map((tab, i) => (
        <View
          key={tab.pagePath}
          className={`tab-item ${active === i ? 'active' : ''}`}
          onClick={() => handleChange(tab, i)}
          // style={{ opacity: i === 3 ? 0.5 : 1 }}
        >
          <Image
            src={active === i ? tab.selectedIcon : tab.icon}
            className={i === 2 ? 'icon-large' : 'icon-small'}
          />
          {tab.label && (
            <Text className={active === i && i !== 3 ? 'txt-active' : 'txt'}>
              {tab.label}
            </Text>
          )}
        </View>
      ))}
    </View>
  );
};

export default observer(CustomTabBar);
